<template>
  <div>
    <div class="all">
      <div class="allbody" @click="redirect">
        <!-- <div class="allbody"  @click="this.$router.push({name: this.user ? 'logout' : 'login'})"> -->
        <img src="../../assets/ele-logo.png" alt='' class="logo" v-if="user==null">
        <img src="../../assets/ele-logo.png" alt='' class="logo" v-else-if="!user.avatar">
        <img :src="formatImage(user.avatar)" alt="" class="logo" v-else>
        <div class="center">
          <p class="loginOr" v-if="user==null">登录/注册</p>
          <p class="loginOr" v-else>{{user.username}}</p>
          <p class="centers" v-if="user==null">登录后享受更多优惠</p>
          <p class="centers" v-else>{{user.mobile}}</p>
        </div>
        <img src="../../assets/you.png" alt class="you">
      </div>
    </div>
    <div>
        <div class="mine-money first">
            <a href="">
                <img data-v-6d410d97="" src="" alt="">
                <p>红包</p>
            </a>
            <a href="">
                <img data-v-6d410d97="" src="" alt="">
                <p>金币</p>
            </a>
        </div>
    </div>
    <classlist></classlist>
  </div>
</template>

<script>
import {formatImage} from '../../modules/unit'
import classlist from './classList';

// import {mapState} from 'vuex';
export default {
  // data() {
  //   return {
  //     user: null
  //   }
  // },
  props:['user'],
  mounted () {
    console.log(document.title);
    console.log("从父组件传值到子组件后数据",this.user);
  },
  // computed:{
  //   ...mapState['userId']
  // },
  // created(){
  //   this.getUserInfo()
  // },
  methods:{
    formatImage,
    redirect(){
      this.$router.push({
        name:this.user ? 'logout' : 'login'
      })
    },
    // getUserInfo(){
    //   console.log("+--++--++---+-+--")
    //   // var that =this
    //   if (this.userId){
    //     console.log("+--++--++---+-+--"+this.userId)
    //     this.$axios.get(`/api/restapi/eus/v3/users/${this.userId}?`)
    //     // https://h5.ele.me/restapi/eus/v3/users/1960726753?
    //     .then(res=>{
    //       console.log('*********/////////////')
    //       console.log(res)
    //       this.user = res.data;
    //     }, error=>{
    //       console.log('没有获取到数据')
    //     })
    //   }
    // }
  },
  components: {
    classlist
  }
};
</script>

<style scoped>
.all {
  height: 110px;
  background-image: linear-gradient(90deg, #0af, #0085ff);
}
.allbody {
  display: flex;
  height: 60px;
  padding: 25px 12px;
}
.logo {
  border-radius: 50%;
  width: 60px;
}
.center {
  margin-left: 12px;
  color: #fff;
  margin: auto 0;
  margin-left: 12px;
  overflow: hidden;
  flex-grow: 1;
}
p {
  margin: 0;
}
.loginOr {
  font-size: 22px;
}
.centers {
  font-size: 14px;
}
.you {
  width: 14px;
  height: 14px;
  margin: auto 0;
}
.mine-money{
    background-color: ghostwhite;
    height: 24vw;
    display: flex;
}
.mine-money a{
    width: 50vw;
    text-align: center;
    text-decoration: none;
}
.mine-money a:nth-child(1){
    border-right: 1px solid gray;
}
.mine-money img{
    width: 10vw;
    margin-top: 3vw;
}
</style>
